<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>角色管理</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
 
  <link rel="stylesheet" href="../../res/css/wholesale/font.css">
  <link rel="stylesheet" href="../../res/css/wholesale/xadmin.css">
  <link rel="stylesheet" href="../../res/layui/css/layui.css">
  <script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
  <script type="text/javascript" src="../../res/layui/layui.js" charset="utf-8"></script>
  <script type="text/javascript" src="../../res/js/wholesale/xadmin.js"></script>
  
</head>
<body>
<div class="demoTable" style="margin-top: 10px;">
   <div class="x-body">
      <div class="layui-row">
        <div class="layui-form layui-col-md12 x-so">
          <input type="text" name="id" id="demoReload" placeholder="请输入角色名称" autocomplete="off" class="layui-input">
          <button class="layui-btn" data-type="reload" lay-filter="sreach"><i class="layui-icon">&#xe615;</i></button>
          <button class="layui-btn"  onclick="showAddOrUpdate('')"><i class="layui-icon"></i>添加</button>
        </div>
      </div>
<table class="layui-table" lay-data="{url:'../../listenRole/selectRole.action', page:true, id:'idTest'}" lay-filter="demo">
  <thead>
    <tr>
      <!-- <th lay-data="{field:'roleId', sort: true, align:'center'}">角色ID</th>  -->
      <th lay-data="{field:'roleName', align:'center'}">角色名称</th>
      <!-- <th lay-data="{field:'roleEncoded',align:'center'}">角色编码</th>  -->
      <th lay-data="{field:'roleDescribe',align:'center'}">角色描述</th>
      <!-- <th lay-data="{field:'isva', align:'center'}">是否有效</th>  -->
      <th lay-data="{field:'openDate', align:'center'}">操作时间</th>
      <th lay-data="{field:'oper', align:'center'}">操作人</th>
      <!-- <th lay-data="{field:'sort', align:'center'}">排序</th>  -->
      <th lay-data="{fixed: 'right', align:'center', toolbar: '#barDemo'}">操作</th>
    </tr>
  </thead>
</table>
 </div>
 </div>
<script type="text/html" id="barDemo">
  <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
  <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>

<!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 -->
<script>
layui.use('table', function(){
  var table = layui.table;
  //监听表格复选框选择
  table.on('checkbox(demo)', function(obj){
    console.log(obj)
  });
  //监听工具条
  table.on('tool(demo)', function(obj){
    var da = obj.data;
    //删除
    if(obj.event === 'del'){
    	if(da.roleId == 0 || da.roleId== 1 ||  da.roleId== 2 ){
    		layer.msg('当前角色不能被删除',{
    			icon: 2,
    			time: 1000
    		});
    	}else{
    		layer.confirm('确认删除吗?', function(index){
    	    	layer.close(index);
    	        obj.del();
    	        var url="../../listenRole/deleteRole.action";
    	        var data={"roleId":da.roleId};
    	        $.post(url,data,function(mes){
    	        	//提示框(是否删除成功)
    				layer.msg(mes.msg, {
    					  icon: mes.datas,
    					  time: 1000 //1秒关闭（如果不配置，默认是3秒）
    					}, function(){
    					  parent.location.reload();
    				});
    	        },"json");
    	      });
    	}
    //修改
    } else if(obj.event === 'edit'){
    	if(da.roleId == 0){
    		layer.msg('当前角色不能被修改',{
    			icon: 2,
    			time: 1000
    		});
    	}else{
        	showAddOrUpdate(da);    		
    	}
    }
  });
  
  //表单重载
  var $ = layui.$, active = {
		    reload: function(){
		      var demoReload = $('#demoReload');
		      
		      //执行重载    查询
		      table.reload('idTest', {
		        page: {
		          curr: 1 //重新从第 1 页开始
		        }
		        ,where: {
		          key: {
		            roleName: demoReload.val()
		          }
		        }
		      });
		    }
		  };
  
  $('.demoTable .layui-btn').on('click', function(){
    var type = $(this).data('type');
    active[type] ? active[type].call(this) : '';
  });
});
//增加或修改
function showAddOrUpdate(obj){
	var from = $("#myFrom").html();
	var addCen = layer.open({
        type: 2//样式
        ,skin: 'layui-layer-molv'//样式
        ,area: ['50%', '60%']
        ,title:"角色维护"//标题
        ,id: 'myFrom' //防止重复弹出
        ,content: "insertOrupdate.html?roleId="+obj.roleId
        ,shade: [0.8, '#393D49'] //显示遮罩
        ,shadeClose:true//点击也能遮罩层关闭
        ,anim:2//弹出动画 
      });
}
</script>
</body>
</html>